import "./index.css";
import { defineComponent, ref, onMounted, nextTick } from "vue";
import { PxTooltip, PxScrollbar } from "px-ui";

const props = {
  content: {
    type: String,
    default: ""
  },
  style: {
    type: Object,
    default: null
  },
  maxWidth: {
    type: String,
    default: "200px"
  },
  maxHeight: {
    type: String,
    default: "300px"
  }
};

export default defineComponent({
  name: "ReTextTooltip",
  props,
  setup(props) {
    const disabled = ref<boolean>(true);
    const ReTextTooltipRef = ref<HTMLElement | null>(null);
    const init = () => {
      disabled.value = ReTextTooltipRef.value.clientWidth >= ReTextTooltipRef.value.scrollWidth;
    };
    onMounted(async () => {
      await nextTick();
      init();
    });
    return () => (
      <PxTooltip
        disabled={disabled.value}
        vSlots={{
          content: () => (
            <PxScrollbar style={{ maxWidth: props.maxWidth, maxHeight: props.maxHeight }}>
              <div class="re-text-tooltip-content">{props.content}</div>
            </PxScrollbar>
          )
        }}
      >
        <div ref={ReTextTooltipRef} class="re-text-tooltip-text" style={{ ...props.style }}>
          {props.content || "--"}
        </div>
      </PxTooltip>
    );
  }
});
